<template>
    <div class="navigation">
        <router-link :to="{name:'home'}">首页</router-link>
        <router-link :to="{name:'article'}" :class="{'link-active' : $route.path.includes('detail')}">文章页</router-link>
        <router-link :to="{name:'user'}" :class="{'link-active' : $route.path.includes('user')}">用户页</router-link>
        <router-link :to="{name:'mobile'}">会员页</router-link>
    </div>
</template>

<script setup>
    // 当前页面的a标签会有2个类：router-link-active router-link-exact-active
    // router-link-active用于嵌套路由
</script>

<style lang="scss" scoped>
    .navigation{
        a{
            padding:10px;
            background-color:#fff;
            margin-right: 10px;
            text-decoration: none;
            font-weight: bold;
            color: #333;
        }
        margin-bottom: 20px;
    }
</style>